<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * 桥接模式：
    *   桥接模式可以将抽象部分与实现部分分离开来，使得两者都可以独立地变化，并且可以一起和谐地工作。
    *   抽象部分和实现部分都可以独立地变化而不会相互影响，降低了代码的耦合性，提高了代码的扩展性。
    *
    * */
    //如果不使用桥接模式，就是下面这种垃圾写法：
    class Drawing{ //抽象的画图功能
        drawing(){}
    }

    class Circle extends Drawing{ //具体画图功能
        drawing(color) {
            if(color === "yellow"){
                console.log("正在画黄色的圆")
            }else{
                console.log("正在画红色的圆")
            }//如果我在这里想花一个绿色的圆，又得修改原来的代码，很不符合设计原则
        }
    }

    class Triangle extends Drawing{ //具体画图功能
        drawing(color) {
            if(color === "yellow"){
                console.log("正在画黄色的三角形")
            }else if(color === "red"){ //原本这里只有画黄色和红色的三角形，要是突然想要画其他颜色的三角形
                console.log("正在画红色的三角形")
            }else{ //就得重新修改源代码，加入一个else新的其他颜色三角形，这种写法就修改了代码，不好
                console.log("正在画其他颜色的三角形")
            }
        }
    }

    new Triangle().drawing("red")


    //桥接模式的写法：
    class Shape{ //抽象出形状类
        drawing(){}
    }

    class Circle1 extends Shape{ //具体的画形状方法继承自抽象
        drawing(color) {
            console.log(`正在画${color.getColor()}颜色的圆`)
        }
    }

    class Triangle1 extends Shape{ //具体的画形状方法继承自抽象
        drawing(color) {
            console.log(`正在画${color.getColor()}颜色的三角形`)
        }
    }

    //这些颜色类就是桥接模式的桥，通过将颜色传入，改变图形
    class Color{ //抽象出颜色类
        getColor(){}
    }

    class Yellow extends Color{ //具体的颜色继承自抽象
        getColor() {
            return "yellow"
        }
    }

    class Red extends Color{
        getColor() {
            return "red"
        }
    }

    let circle1 = new Circle1() //实例化生成一个形状对象
    let red = new Red() //实例化生成一个红色颜色对象
    circle1.drawing(red) //形状对象调用画图方法，并将颜色对象传入画图方法中

    //如果突然想画黑色的，只需要添加一个新的颜色就行，不需要修改原来的代码
    class Black extends Color{
        getColor() {
            return "black"
        }
    }
    let black = new Black() //再实例化生成一个黑色颜色对象
    circle1.drawing(black) //形状对象调用画图方法，并将颜色对象传入画图方法中

    //如果想画一个方形，添加一个方形类
    class Fang extends Shape{
        drawing(color) {
            console.log(`正在画${color.getColor()}颜色的方形`)
        }
    }
    let fang = new Fang() //实例化生成方形对象
    fang.drawing(red) //方形对象调用画图方法，并传入颜色对象即可

</script>
</body>
</html>